<template>
  <div class="upload-img-cover">
    <el-upload ref="upload" v-model:file-list="fileCover" :action="props.action" list-type="picture-card"
      :auto-upload="true" :limit="limitCover" :on-exceed="handleExceed" :on-change="coverFileRemove"
      :class="{ disUoloadBtn: noneCoverBtn }">
      <el-icon>
        <Plus />
      </el-icon>
      <template #file="{ file }">
        <div>
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
              <el-icon><zoom-in /></el-icon>
            </span>
            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
              <el-icon>
                <Download />
              </el-icon>
            </span>
            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
              <el-icon>
                <Delete />
              </el-icon>
            </span>
          </span>
        </div>
      </template>
    </el-upload>
    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, } from "vue"
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import { genFileId } from 'element-plus'
import Service from '@/utils/axios'
import type { UploadFile, UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus'
import { ElMessage, ElMessageBox } from "element-plus";
import "element-plus/es/components/message/style/css"; // 按需引入ElMessage样式失败，手动引入
import "element-plus/es/components/message-box/style/css";


// 从父组件获取参数
const props = defineProps({
  action: {
    type: String, // 数据类型
    required: true, // 必传
  }
})
// 向父组件传文件数据
const emit = defineEmits(['updateCover'])
// 向父组件传cover
const setCover = () => {
  let urlArr: string[] = [];
  fileCover.value.forEach((el: any) => {
    urlArr.push(el.response.simpleUrl);
  });
  emit('updateCover', urlArr[0]);
}
// 项目封面
const fileCover = ref([])
// 上传的封面图片上限
const limitCover = ref(1)
// 上传的封面数量到上限后是否隐藏flag
const noneCoverBtn = ref(false)

const upload = ref<UploadInstance>()
// 文件超出限制时触发
const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}
// 封面图片改动时触发
function coverFileRemove() {
  noneCoverBtn.value = fileCover.value.length + 1 >= limitCover.value;

  // 封面数组变动，改变父组件值
  setCover();
}
// 项目封面上传
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
const handleRemove = (file: any) => {
  console.log(file)
  fileCover.value.splice(0);
  noneCoverBtn.value = false;
  // 封面数组变动，改变父组件值
  setCover();
  // 向后端发送删除封面文件的请求
  Service.post('/bkapi/api/deleteimgPublishProCover', {
    filename: file.response?.filename,
    fileUrl: file.response?.fileUrl
  }).then((res: any) => {
    // console.info('res', res)
    if (res.data?.status === 200) {
      ElMessage({
        showClose: true,
        message: res.data?.data,
        type: 'success',
      })
    } else {
      ElMessage({
        showClose: true,
        message: res.data?.data,
        type: 'error',
      })
    }

  })
}
const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}
const handleDownload = (file: UploadFile) => {
  console.log(file)
}

</script>

<style lang="" scoped>

</style>